<template>
  <div class="view-notice">
    <el-menu-item index="2" @click="handleCheckNotice"> 查看公告 </el-menu-item>
    <el-dialog v-model="dialogOverflowVisible" title="公告详情" draggable>
      <el-table :data="noticeInfo" max-height="300" stripe border highlight-current-row>
        <el-table-column prop="updatedAt" label="更新时间" sortable />
        <el-table-column prop="publishContent" label="公告内容" />
      </el-table>
    </el-dialog>
  </div>
</template>
<script setup>
import { ref } from 'vue'
import axios from 'axios'
import { ElMessage } from 'element-plus'
import { useRouter } from 'vue-router'

const router = useRouter()
const dialogOverflowVisible = ref(false)

//公告信息
const noticeInfo = ref([])

// 获取公告信息
const handleCheckNotice = () => {
  axios
    .post('http://localhost:3001/getallnotice')
    .then((res) => {
      dialogOverflowVisible.value = true
      noticeInfo.value = res.data.data.data
        .sort((a, b) => new Date(b.updatedAt) - new Date(a.updatedAt)) // 按更新时间倒序排序
        .map((item) => ({
          ...item,
          updatedAt: new Date(item.updatedAt).toLocaleString(), // 格式转换
        }))
    })
    .catch((error) => {
      if (error.response) {
        switch (error.response.status) {
          case 404:
            ElMessage.warning('未找到施工公告数据')
            break
          case 400:
            ElMessage.error('请求参数错误')
            break
          case 401:
            ElMessage.error('登录过期，请重新登录')
            router.push('/login')
            break
          default:
            ElMessage.error('服务器异常，请稍后重试')
        }
      } else {
        ElMessage.error('网络连接失败，请检查网络')
      }
    })
}
</script>

<style lang="scss" scoped></style>
